<script setup lang="ts">
import { ElMessageBox } from "element-plus";
import HomeMenu from "./HomeMenu.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const exitHandler = async () => {
  await ElMessageBox.confirm("确定要退出登录吗？", "提示", {
    type: "warning",
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  });
  sessionStorage.clear();
  localStorage.clear();
  router.replace("/login");
};
</script>

<template>
  <el-container>
    <el-header>
      <h1>教务云平台</h1>
      <el-button type="primary" @click="exitHandler">退出登录</el-button>
    </el-header>
    <el-container class="container">
      <el-aside width="200px">
        <home-menu></home-menu>
      </el-aside>
      <el-main class="main"><router-view></router-view></el-main>
    </el-container>
  </el-container>
</template>

<style scoped lang="scss">
.el-header {
  display: flex;
  background-color: #87CEFA;
  justify-content: space-between;
  h1 {
    font-size: 30px;
    margin-top: 10px;
    color: #8b4513;
    margin-left: 860px;
  }
  .el-button {
    margin-right: 20px;
    margin-top: 10px;
    width: 150px;
    font-size: 20px;
    color: #2E8B57;
    background-color: #D2B48C;
    border: none;   
    }
  }

.el-aside {
  background-color:#B0E0E6 ;
}
.main {
  position: relative;
  width: 100%;
  height: 767px;
  background-color: #ADD8E6;
//   background-image: url("../../components/bg.png");
}    
</style>
